import React from 'react';
import {Redirect, Route, Switch} from "react-router-dom";
import Home from "./App/Website/Home/Home";
import Login from "./App/Website/Login/Login";
import SignUp from "./App/Website/Signup/SignUp";
import News from "./App/Website/News/News";
import Architecture from "./App/Website/Architecture/Architecture";
import Publications from "./App/Website/Publications/Publications";
import Team from "./App/Website/Team/Team";
import {AuthorizedRoute} from "../assets/functions/functions";
import Dashboard from "./App/Editor/Dashboard/Dashboard";
import GQIEditor from "./App/Editor/GQIEditor/GQIEditor";
import IndicatorEditor from "./App/Editor/IndicatorEditor/IndicatorEditor";
import BasicIndicator from "./App/Editor/IndicatorEditor/BasicIndicator/BasicIndicator";
import CompositeIndicator from "./App/Editor/IndicatorEditor/CompositeIndicator/CompositeIndicator";
import MultilevelIndicator from "./App/Editor/IndicatorEditor/MultilevelIndicator/MultilevelIndicator";
import Settings from "./App/Editor/Settings/Settings";
import {makeStyles} from "@material-ui/styles";
import Demo from "./App/Editor/Demo/Demo";
import GoalQuestionIndicator from "./App/Editor/GoalQuestionIndicator/GoalQuestionIndicator";
import IndicatorSpecificationCard from "./App/Editor/IndicatorSpecificationCard/IndicatorSpecificationCard";


const drawerWidth = 300;

const useStyles = makeStyles(theme => ({
  toolbar: theme.mixins.toolbar,
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
    [theme.breakpoints.up("md")]: {
      marginLeft: drawerWidth,
    },
  },
  root: {
    flex: 1
  },
  mainContainer: {
    padding: theme.spacing(4),
  },
  gridHeader: {
    marginBottom: theme.spacing(1),
  },
  gridSubheader: {
    margin: theme.spacing(2, 0, 2, 0),
  },
  gridSubheaderSmall: {
    margin: theme.spacing(1, 0, 1, 0),
  },
  typographyBody1: {
    margin: theme.spacing(1, 0, 1, 0),
  },
  gutter: {
    margin: theme.spacing(2, 2, 2, 2),
  },
  gutterSmall: {
    margin: theme.spacing(2, 1, 2, 2),
  },
  paddingGutter: {
    padding: theme.spacing(3, 3, 3, 0),
  },
  paddingGutterSmall: {
    padding: theme.spacing(1, 2, 1, 2)
  },
  gutterRight: {
    margin: theme.spacing(0, 1, 0, 0),
  },
  gutterLeftLarge: {
    margin: theme.spacing(0, 0, 0, 2),
  },
  gutterLeftRightLarge: {
    margin: theme.spacing(0, 2, 0, 2),
  },
  gutterLeftRight: {
    margin: theme.spacing(0, 1, 0, 1),
  },
  gutterLeftRightQuestion: {
    margin: theme.spacing(0, 0, 0, 1),
  },
  gutterTop: {
    margin: theme.spacing(2, 0, 0, 0),
  },
  gutterBottom: {
    margin: theme.spacing(0, 0, 2, 0),
  },
  gutterTopBottom: {
    margin: theme.spacing(2, 0, 2, 0),
  },
  gutterTopBottomLarge: {
    margin: theme.spacing(3, 0, 3, 0),
  },
  gutterBottomMedium: {
    margin: theme.spacing(0, 0, 4, 0),
  },
  gutterBottomLarge: {
    margin: theme.spacing(1, 0, 5, 0),
  },
  menuOptions: {
    margin: theme.spacing(1, 0, 1, 0),
  },
  avatar: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.common.white,
  },
  avatarError: {
    backgroundColor: theme.palette.error.main,
    color: theme.palette.common.white,
  },
  avatarSelected: {
    backgroundColor: "green",
    color: theme.palette.common.white,
  },
  selectedBorder: {
    borderColor: "#4caf50",
    borderStyle: "solid"
  },
  selectedIcon: {
    color: "#4caf50"
  },
  primaryIcon: {
    color: theme.palette.common.white,
    backgroundColor: theme.palette.primary.main,
    '&:hover': {
      color: theme.palette.primary.main,
      backgroundColor: theme.palette.common.white,
    }
  },
  cardHeaderStyle: {
    margin: theme.spacing(0, 3.5, 0, 3.5)
  },
  indicatorChipList: {
    marginTop: theme.spacing(0.5),
    marginRight: theme.spacing(1),
  },
  indicatorChips: {
    marginRight: theme.spacing(1),
  },
  marginRightMedium: {
    marginRight: theme.spacing(1)
  },
  fontAwesomeIconButton: {
    margin: theme.spacing(0, 1, 0, 1),
    width: theme.spacing(6),
    height: theme.spacing(6)
  },
  expand: {
    transform: "rotate(0deg)",
    margin: theme.spacing(0, 2, 0, 1),
    width: theme.spacing(5.5),
    height: theme.spacing(5.5),
    transition: theme.transitions.create("transform", {
      duration: theme.transitions.duration.shortest
    })
  },
  expandOpen: {
    transform: "rotate(180deg)"
  },
  // Floating action buttons for GQIEditor and Indicator Editor
  fabDarkMode: {
    margin: theme.spacing(0),
    top: "auto",
    right: "auto",
    bottom: theme.spacing(12.5),
    left: theme.spacing(2.5),
    position: 'fixed',
    transition: "all .3s linear",
    backgroundColor: theme.palette.common.white,
    color: theme.palette.primary.main,
    '&:hover': {
      color: theme.palette.common.white,
      backgroundColor: theme.palette.primary.main,
    },
  },
  fabHelp: {
    margin: theme.spacing(0),
    top: "auto",
    left: "auto",
    bottom: theme.spacing(5.5),
    right: theme.spacing(2.5),
    position: 'fixed',
    transition: "all .3s linear",
  },
  floatingStepper: {
    top: theme.spacing(13),
    right: "auto",
    bottom: "auto",
    left: "auto",
    position: 'fixed',
    transition: "all .3s linear",
  },
  fabSaveProgress: {
    margin: theme.spacing(0),
    top: "auto",
    right: theme.spacing(2.5),
    bottom: theme.spacing(30),
    left: "auto",
    position: 'fixed',
    transition: "all .3s linear",
    color: theme.palette.common.white,
    backgroundColor: theme.palette.success.main,
    '&:hover': {
      backgroundColor: theme.palette.success.dark,
    },
  },
  fabResetProgress: {
    top: theme.spacing(13),
    right: "auto",
    zIndex: 10,
    bottom: "auto",
    left: "auto",
    position: 'fixed',
    transition: "all 0.2s linear",
    color: theme.palette.error.main,
    backgroundColor: theme.palette.common.white,
    '&:hover': {
      backgroundColor: theme.palette.error.main,
      color: theme.palette.common.white,
    },
  },
  fabToDashboard: {
    zIndex: 10,
    top: theme.spacing(13),
    right: "auto",
    bottom: "auto",
    left: "auto",
    position: 'fixed',
    transition: "all 0.2s linear",
    color: theme.palette.common.white,
    backgroundColor: theme.palette.primary.main,
    '&:hover': {
      color: theme.palette.primary.main,
      backgroundColor: theme.palette.common.white,
    },
  },
  fabBackToEditor: {
    zIndex: 10,
    top: theme.spacing(13),
    right: "auto",
    bottom: "auto",
    left: "auto",
    position: 'fixed',
    transition: "all .2s linear",
    color: theme.palette.common.white,
    backgroundColor: theme.palette.primary.main,
    '&:hover': {
      color: theme.palette.primary.main,
      backgroundColor: theme.palette.common.white,
    },
  },
  backdrop: {
    zIndex: theme.zIndex.drawer + 1,
    color: '#fff',
  },
  clearButton: {
    height: theme.spacing(8)
  },
  gridItemInputBase: {
    paddingLeft: theme.spacing(2),
  },
}));

export default function Routes() {
  const classes = useStyles();
  const login = !!localStorage.getItem('userToken');
  return (
    <>
      <Switch>
        {!login ? (
          <>
            {/* Website */}
            <Route exact path='/' render={(props) => <Home {...props} />}/>
            <Route path='/login' render={(props) => <Login {...props} />}/>
            <Route path='/signup' render={(props) => <SignUp {...props} />}/>
            <Route path="/news" component={News}/>
            <Route path="/architecture" component={Architecture}/>
            <Route path="/publications" component={Publications}/>
            <Route path="/team" component={Team}/>
            <Route render={() => <Redirect to={{pathname: "/"}}/>}/>
          </>
        ) : (
          <main className={classes.content}>
            <div className={classes.toolbar}/>

            {/* Editor */}
            <AuthorizedRoute isAuth={login} path='/dashboard' component={Dashboard} classes={classes}/>
            <AuthorizedRoute isAuth={login} path='/editor' component={GQIEditor} classes={classes}/>
            <AuthorizedRoute isAuth={login} path='/indicatorEditor' component={IndicatorEditor} classes={classes}/>
            <AuthorizedRoute isAuth={login} path='/basic' component={BasicIndicator} classes={classes}/>
            <AuthorizedRoute isAuth={login} path='/composite' component={CompositeIndicator} classes={classes}/>
            <AuthorizedRoute isAuth={login} path='/multi-level' component={MultilevelIndicator} classes={classes}/>
            <AuthorizedRoute isAuth={login} path='/gqi-new' component={GoalQuestionIndicator}/>
            <AuthorizedRoute isAuth={login} path='/isc-creator' component={IndicatorSpecificationCard}/>
            <AuthorizedRoute isAuth={login} path='/demo' component={Demo} classes={classes}/>
            <AuthorizedRoute isAuth={login} path='/settings' component={Settings}/>
            {/* <Route render={() => <Redirect to={{pathname: "/dashboard"}}/>}/> */}


          </main>
        )
        }
      </Switch>
    </>

  )
}
